<template>
    <div id="manageCenter">
        <p class="page-title">管理中心</p>
        <div class="container padder-v" v-loading="pageLoading">
            <div class="first">
                <el-card class="personal-info padder" shadow="hover">
                    <div slot="header">
                        <i class="el-icon-user"></i> 账号信息（ID:{{data.yonghu_data.id}}）
                    </div>
                    <div class="info">
                        <div class="left">
                            <div class="img">
                                <img :src="data.yonghu_data.touxiang" alt="">
                            </div>
                            <div>
                                <div class="name">欢迎您，{{data.yonghu_data.nicheng}}</div>
                                <div>
                                    卖家信用：
                                    <decimal-start></decimal-start>
                                    <decimal-start></decimal-start>
                                    <decimal-start></decimal-start>
                                    <decimal-start :width="60"></decimal-start>
                                    <span>买家信用：
                                     <decimal-start></decimal-start>
                                     <decimal-start></decimal-start>
                                        <decimal-start></decimal-start>
                                     <decimal-start :width="60"></decimal-start>

                                    </span>
                                </div>
                                <div class="">上次登陆时间：{{data.yonghu_data.shangci_denglu_shijian}}</div>
                            </div>
                        </div>
                        <div class="right">
                            <div>可用余额：<span
                                    class="text-danger text-lg font-bold">{{(data.yonghu_data.yue / 100).toFixed(2)}}</span><sub>
                                元</sub>
                            </div>
                            <div>冻结金额：<span class="text-danger text-lg font-bold">{{(data.yonghu_data.dongjieyue / 100).toFixed(2)}}</span><sub>
                                元</sub>
                            </div>
                            <div>
                                <el-button type="primary" class="m-r" @click="$router.push({name:'addFunds'})">充值
                                </el-button>
                                <el-button type="default" @click="$router.push({name:'finWithdraw'})">提现</el-button>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card notify" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>买家提醒</span>
                        <el-button style="float: right; padding: 3px 0" type="text"
                                   @click="$router.push('/buyer/bought')">交易成功
                            {{data.tixing_data.suoyou_jiaoyi_chenggong}} 笔
                        </el-button>
                    </div>
                    <div class="body">
                        <div class="item">
                            <p>等待交易</p>
                            <div class="circle" @click="$router.push('/buyer/bought')">
                                {{data.tixing_data.dengdai_queren}}
                            </div>
                        </div>
                        <div class="item">
                            <p>正在交易</p>
                            <div class="circle" @click="$router.push('/buyer/bought')">
                                {{data.tixing_data.zhengzai_jiaoyi}}
                            </div>
                        </div>
                        <div class="item">
                            <p>正在退款</p>
                            <div class="circle" @click="$router.push('/buyer/issue')">
                                {{data.tixing_data.zhengzai_tuikuan}}
                            </div>
                        </div>
                    </div>
                </el-card>

            </div>
            <div class="second">
                <el-card shadow="hover" class="left activity">
                    <div slot="header">
                        <span>店铺动态</span>
                    </div>
                    <div class="body">
                        <div class="b-b padder-v m-t-n">交易：
                            <el-link type="primary" @click="$router.push({path:'/buyer/bought'})">
                                待确认（{{data.shanghu_data.tongji_1_daique_ren}}）
                            </el-link>
                            <el-link type="primary" @click="$router.push({path:'/buyer/bought'})">
                                待评价（{{data.shanghu_data.tongji_1_daiping_jia}}）
                            </el-link>
                            <el-link type="danger" @click="$router.push({path:'/buyer/issue'})">
                                退款中（{{data.shanghu_data.tongji_1_tuikuan_zhong}}）
                            </el-link>
                            <el-link type="primary" @click="$router.push({path:'/buyer/bought'})">
                                已完成（{{data.shanghu_data.tongji_1_yiwan_cheng}}）
                            </el-link>
                        </div>
                        <div class="b-b padder-v pro-types">商品：
                            <el-link type="primary"
                                     class="m-r-sm"
                                     @click="$router.push({path:'/seller/proManage',query:{type:1}})">
                                出售中（{{data.shanghu_data.tongji_2_chushou_zhong}}）
                            </el-link>
                            <el-link type="primary"
                                     class="m-r-sm"
                                     @click="$router.push({path:'/seller/proManage',query:{type:0}})">
                                仓库中（{{data.shanghu_data.tongji_2_changku_zhong}}）
                            </el-link>
                            <el-link type="primary"
                                     class="m-r-sm"
                                     @click="$router.push({path:'/seller/proManage',query:{type:2}})">
                                回收站（{{data.shanghu_data.tongji_2_huishou_zhan}}）
                            </el-link>
                        </div>
                        <div class="status">
                            <div class="item" style="flex: 1.2">
                                <div>状态</div>
                                <div class="flex-align-center">店铺：
                                    <span :class="{'text-danger':!data.shanghu_data.shanghu_zhuangtai,'text-success':data.shanghu_data.shanghu_zhuangtai}">
                                        {{data.shanghu_data.shanghu_zhuangtai ?'正常':'关闭'}}
                                    </span>

                                    <el-button size="mini" type="danger" class="m-l"
                                               v-if="!data.shanghu_data.shanghu_zhuangtai" @click="openOrClose(1)">开启
                                    </el-button>
                                    <el-button size="mini" type="danger" class="m-l" v-else @click="openOrClose(0)">关闭
                                    </el-button>
                                </div>
                                <div>保证金：
                                    {{data.shanghu_data.baozhenjin?(data.shanghu_data.baozhenjin/100).toFixed(2)+'元':'未缴纳'}}

                                    <el-button type="primary" size="mini" class="m-l-sm"
                                               v-if="!data.shanghu_data.baozhenjin"
                                               @click="$router.push({name:'deposit'})">缴纳
                                    </el-button>

                                    <el-button size="mini" type="primary" @click="out" class="m-l-xs">转出</el-button>
                                </div>
                            </div>
                            <div class="item">
                                <div>评价</div>
                                <div class="leave">
                                    <div class="item">
                                        <div>
                                            <svg class="icon" width="25px" height="25.00px" viewBox="0 0 1024 1024"
                                                 version="1.1" xmlns="http://www.w3.org/2000/svg">
                                                <path :fill="svgFill"
                                                      d="M895.039579 340.536615C873.902384 290.559904 843.644807 245.680481 805.110378 207.146159 766.575948 168.611838 721.695235 138.354344 671.718387 117.216042 619.964763 95.326255 565.001297 84.226404 508.355431 84.226404 451.710729 84.226404 396.748429 95.326255 344.994806 117.216042 295.017957 138.353179 250.139573 168.611838 211.603979 207.146159 173.068386 245.680481 142.811973 290.559904 121.673613 340.536615 99.783764 392.291259 88.685047 447.253408 88.685047 503.897953 88.685047 560.543662 99.78493 615.505809 121.673613 667.260453 142.811973 717.237164 173.069551 762.116588 211.603979 800.65091 250.138408 839.185232 295.017957 869.442725 344.994806 890.581027 396.749594 912.470815 451.710729 923.570666 508.355431 923.570666 565.002463 923.570666 619.965928 912.470815 671.718387 890.581027 721.695235 869.44389 766.574783 839.186397 805.110378 800.65091 843.643642 762.117753 873.901219 717.237164 895.039579 667.260453 916.929427 615.505809 928.02931 560.543662 928.02931 503.897953 928.02931 447.253408 916.929427 392.290094 895.039579 340.536615L895.039579 340.536615ZM339.868378 348.425468C370.674717 348.425468 395.648577 373.398095 395.648577 404.205513 395.648577 435.0106 370.674717 459.984391 339.868378 459.984391 309.06204 459.984391 284.088179 435.0106 284.088179 404.205513 284.088179 373.398095 309.06204 348.425468 339.868378 348.425468L339.868378 348.425468ZM726.676027 639.025563C702.320831 671.785678 669.895009 698.98014 632.9055 717.667085 594.769534 736.933081 551.700547 747.117167 508.355431 747.117167 465.01381 747.117167 421.945989 736.934246 383.808858 717.66825 346.819349 698.981305 314.393524 671.788008 290.038331 639.029058 282.573552 628.989443 284.661406 614.798598 294.702216 607.333839 304.744189 599.869082 318.932744 601.958096 326.396357 611.997711 368.207039 668.235637 436.230082 701.811319 508.355431 701.811319 580.483111 701.811319 648.507318 668.235637 690.316835 611.994216 697.781612 601.953434 711.970168 599.864421 722.012142 607.330344 732.051785 614.795103 734.140805 628.983618 726.676027 639.025563L726.676027 639.025563ZM676.845979 459.985556C646.040806 459.985556 621.066945 435.011765 621.066945 404.206678 621.066945 373.39926 646.040806 348.426633 676.845979 348.426633 707.652318 348.426633 732.626179 373.39926 732.626179 404.206678 732.626179 435.011765 707.652318 459.985556 676.845979 459.985556L676.845979 459.985556Z"/>
                                            </svg>
                                        </div>
                                        <div>好评</div>
                                        <div>{{data.shanghu_data.haoping_shuliang}}</div>
                                    </div>
                                    <div class="item">
                                        <div>
                                            <svg class="icon" width="52px" height="25.00px" viewBox="0 0 1024 1024"
                                                 version="1.1"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path :fill="svgFill"
                                                      d="M883.688775 348.866761C863.106914 298.969474 833.644292 254.161372 796.122275 215.688289 758.600257 177.215206 714.898689 147.005797 666.234877 125.901088 615.839838 104.046088 562.320421 92.963876 507.16394 92.963876 452.007459 92.963876 398.488044 104.046088 348.095273 125.901088 299.431459 147.004634 255.732162 177.215206 218.20901 215.688289 180.685858 254.161372 151.224369 298.969474 130.641374 348.866761 109.326636 400.539158 98.519514 455.413961 98.519514 511.968486 98.519514 568.524174 109.32777 623.398977 130.641374 675.071374 151.224369 724.968661 180.686992 769.776764 218.20901 808.249848 255.731027 846.722931 299.431459 876.932338 348.095273 898.037048 398.489177 919.892049 452.007459 930.97426 507.16394 930.97426 562.321556 930.97426 615.840971 919.892049 666.234877 898.037048 714.898689 876.933501 758.599123 846.724093 796.122275 808.249848 833.643157 769.777928 863.105781 724.968661 883.688775 675.071374 905.003513 623.398977 915.811769 568.524174 915.811769 511.968486 915.811769 455.413961 905.004648 400.537994 883.688775 348.866761L883.688775 348.866761ZM343.10353 356.744241C373.100497 356.744241 397.418222 381.67718 397.418222 412.435639 397.418222 443.191773 373.100497 468.125876 343.10353 468.125876 313.106565 468.125876 288.789974 443.191773 288.789974 412.435639 288.789974 381.67718 313.106565 356.744241 343.10353 356.744241L343.10353 356.744241ZM702.047224 692.309464 312.285196 692.309464C300.103076 692.309464 290.227368 682.183438 290.227368 669.69254 290.227368 657.201642 300.103076 647.075615 312.285196 647.075615L702.047224 647.075615C714.229342 647.075615 724.10505 657.201642 724.10505 669.69254 724.10505 682.183438 714.230477 692.309464 702.047224 692.309464L702.047224 692.309464ZM671.227753 468.125876C641.231922 468.125876 616.914197 443.191773 616.914197 412.435639 616.914197 381.67718 641.231922 356.744241 671.227753 356.744241 701.22472 356.744241 725.542445 381.67718 725.542445 412.435639 725.54358 443.191773 701.22472 468.125876 671.227753 468.125876L671.227753 468.125876Z"/>
                                            </svg>
                                        </div>
                                        <div>中评</div>
                                        <div>{{data.shanghu_data.zhongpin_shuliang}}</div>
                                    </div>
                                    <div class="item">
                                        <div>
                                            <svg class="icon" width="52px" height="25.00px" viewBox="0 0 1024 1024"
                                                 version="1.1"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path :fill="svgFill"
                                                      d="M889.708273 351.374597C868.78338 301.882979 838.829715 257.43917 800.682329 219.278876 762.534944 181.118582 718.105018 151.154778 668.630142 130.221652 617.396338 108.544335 562.984933 97.552222 506.908023 97.552222 450.832268 97.552222 396.420861 108.544335 345.187058 130.221652 295.712181 151.153625 251.284561 181.118582 213.136024 219.278876 174.987486 257.43917 145.034972 301.882979 124.108928 351.374597 102.438944 402.626893 91.451703 457.05556 91.451703 513.150292 91.451703 569.246177 102.440097 623.674842 124.108928 674.927138 145.034972 724.418758 174.988639 768.862566 213.136024 807.02286 251.283408 845.183153 295.712181 875.146957 345.187058 896.080084 396.422014 917.757401 450.831114 928.749513 506.908023 928.749513 562.984933 928.749513 617.397492 917.757401 668.630142 896.080084 718.105018 875.148111 762.533792 845.184307 800.682329 807.02286 838.828561 768.86372 868.782227 724.418758 889.708273 674.927138 911.378256 623.674842 922.36665 569.246177 922.36665 513.150292 922.36665 457.05556 911.37941 402.625739 889.708273 351.374597L889.708273 351.374597ZM340.112119 359.186877C370.609036 359.186877 395.332057 383.917111 395.332057 414.425501 395.332057 444.931584 370.609036 469.662971 340.112119 469.662971 309.615205 469.662971 284.892184 444.931584 284.892184 414.425501 284.893338 383.917111 309.615205 359.186877 340.112119 359.186877L340.112119 359.186877ZM718.417589 737.768054C708.478785 745.159202 694.431587 743.091618 687.040633 733.14945 639.659168 669.397047 562.931876 656.01429 506.909177 656.01429 450.886477 656.01429 374.158032 669.397047 326.776567 733.152911 322.375212 739.075292 315.612858 742.203204 308.761692 742.203204 304.111203 742.203204 299.420346 740.762126 295.399612 737.772669 285.460808 730.380367 283.39277 716.329569 290.782572 706.385094 314.555194 674.397551 346.280475 649.953456 385.077222 633.734697 420.925891 618.74818 461.916394 611.14935 506.909177 611.14935 551.900807 611.14935 592.892464 618.74818 628.739978 633.734697 667.536724 649.952302 699.262005 674.395244 723.035781 706.381633 730.424429 716.323801 728.356393 730.376905 718.417589 737.769207L718.417589 737.768054ZM673.705079 469.664125C643.209318 469.664125 618.486298 444.932738 618.486298 414.426655 618.486298 383.918264 643.209318 359.188031 673.705079 359.188031 704.201996 359.188031 728.925017 383.918264 728.925017 414.426655 728.92617 444.932738 704.201996 469.664125 673.705079 469.664125L673.705079 469.664125Z"/>
                                            </svg>
                                        </div>
                                        <div>差评</div>
                                        <div>{{data.shanghu_data.chaping_shuliang}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div>评分</div>
                                <div>服务态度：{{data.shanghu_data.pingfen_fuwu || '5.00'}}</div>
                                <div>完成速度：{{data.shanghu_data.pingfen_cengjiap || '5.00'}}</div>
                                <div>商品质量：{{data.shanghu_data.pingfen_zhiliang || '5.00'}}</div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="middle total" shadow="hover">
                    <div slot="header">
                        <span>销售统计</span>
                        <div style="float: right;padding: 3px 0">
                            <el-link type="primary" :class="{active:saleCounter.active ==='jinri'}"
                                     @click="clickCounter('jinri')">今日
                            </el-link>
                            <el-link type="primary" class="m-l" :class="{active:saleCounter.active ==='benzhou'}"
                                     @click="clickCounter('benzhou')">本周
                            </el-link>
                            <el-link type="primary" class="m-l" :class="{active:saleCounter.active ==='benyue'}"
                                     @click="clickCounter('benyue')">本月
                            </el-link>
                        </div>
                    </div>
                    <div class="counter">
                        <div class="item">
                            <div>交易量</div>
                            <div class="num"><span>{{saleCounter.data.jiaoyi_liang}}</span> <sub> 笔</sub></div>
                            <div> 成交量 {{saleCounter.data.jiaoyi_liang}} 笔</div>
                        </div>
                        <div class="item">
                            <div>交易额</div>
                            <div class="num"><span>{{saleCounter.data.jiaoyi_e}}</span> <sub> 元</sub></div>
                            <div>成交额 {{saleCounter.data.jiaoyi_e}} 元</div>
                        </div>
                        <div class="item">
                            <div>退款率</div>
                            <div class="num"><span>{{saleCounter.data.tuikuan_lv}}</span> <sub> %</sub></div>
                            <div> 退款量 {{saleCounter.data.jiaoyi_tuikuan}} 笔</div>
                        </div>
                        <div class="item">
                            <div>客单价</div>
                            <div class="num"><span>{{saleCounter.data.ke_danjia}}</span> <sub> 元</sub></div>
                            <div> 成交客单价 {{saleCounter.data.ke_danjia}} 元</div>
                        </div>
                    </div>
                </el-card>
                <el-card class="right notify" shadow="hover">
                    <div slot="header">公告通知</div>
                    <div class="list">
                        <div v-for="(item,index) in data.gonggao_data" :key="item.Id" class="gg">
                            <div>
                                <span class="index">{{index+1}}</span>
                                <el-link type="primary" @click="showNotice(item)">{{item.biaoti}}</el-link>

                            </div>
                            <div class="text-muted text-sm">
                                {{item.create_time}}
                            </div>
                        </div>

                    </div>
                </el-card>
            </div>
            <div class="tip m-t-lg text-center">
                <span class="text-2x font-bold text-info">温馨提示</span>
                <span class="text">一个合格的商家，除了保证商品的质量外，服务态度也是重要的因素</span>
            </div>

            <el-dialog
                    :title="notice.title"
                    :visible.sync="notice.dialog"
                    width="35%">
                <div class="padder content" v-html="notice.content"></div>
                <div class="text-right text-muted m-t-md">{{notice.create_time}}</div>
                <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="notice.dialog = false">确 定</el-button>
  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'manageCenter',
        components: {},
        data() {
            return {
                svgFill: '#fbbc05',
                notice: {
                    dialog: false,
                    title: '',
                    content: '',
                    create_time: ''
                },
                pageLoading: false,
                saleCounter: {
                    active: 'jinri',
                    data: {}

                },
                data: {
                    gonggao_data: {},
                    tixing_data: {},
                    xiaoshou_data: {
                        jinri: {}
                    },
                    yonghu_data: {},
                    shanghu_data: {}
                }
            }
        },
        computed: {},
        methods: {
            //拉取数据
            getData() {
                this.pageLoading = true;
                return new Promise(resolve => {
                    this.$axios.post(`/api/user/guanli_zhongxin`)
                        .then(res => {
                            if (res.code === '200') {
                                this.$set(this, 'data', res.data);
                                resolve()
                            }
                        }).finally(() => {
                        this.pageLoading = false
                    })
                })
            },
            //弹窗显示公告详情
            showNotice({biaoti, neirong, create_time}) {
                this.notice.dialog = true;
                this.notice.title = biaoti;
                this.notice.content = neirong;
                this.notice.create_time = create_time;
            },
            //切换显示统计数据
            clickCounter(name) {
                this.saleCounter.active = name;
                this.$set(this.saleCounter, 'data', this.data.xiaoshou_data[name])
            },
            //开关店铺
            openOrClose(type) {
                this.$confirm(`确认${type ? '开启' : '关闭'}店铺吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post(`/api/user/dianpi_guanli`)
                        .then(res => {
                            if (res.code === `200`) {
                                this.$message.success(res.msg);

                                // this.getData();
                                setTimeout(() => {
                                    location.reload();
                                }, 500)
                            }
                        })
                })

            },
            //转出商户保证金
            out() {
                this.$axios.post(`/api/user/jiedong_baoxianjin`)
                    .then(res => {
                        if (res.code === `200`) {
                            this.$message.success(res.msg);
                        }
                    })
            },
        },
        created() {
            this.getData()
                .then(() => {
                    this.$set(this.saleCounter, 'data', this.data.xiaoshou_data['jinri'])
                })

        },
        mounted() {

        },
    }
</script>

<style lang="less" scoped>
    @bgColor: #fdfdfd;
    .el-link.is-underline.active:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 0;
        bottom: 0;
        border-bottom: 1px solid #409EFF;
    }

    #manageCenter {
        .container {
            .first {
                display: flex;

                .personal-info {
                    background: @bgColor;
                    flex: 2;

                    .info {
                        display: flex;
                        margin-top: 20px;
                        align-items: center;

                        .left {
                            flex: 2;
                            display: flex;
                            align-items: center;

                            .name {
                                font-size: 18px;
                                font-weight: bold;

                            }

                            .img {
                                margin-right: 20px;

                                img {
                                    width: 120px;
                                    border-radius: 50%;
                                }

                                & + div {
                                    & > div {
                                        margin: 10px 0;
                                    }
                                }
                            }
                        }

                        .right {
                            flex: 1;
                            text-align: left;
                            padding-left: 20%;

                            div {
                                margin: 10px 0;
                            }
                        }
                    }
                }

                .notify {
                    flex: 1;
                    margin-left: 20px;
                    background: @bgColor;

                    .body {
                        display: flex;
                        justify-content: space-between;

                        .item {
                            text-align: center;

                            .circle {
                                margin-top: 20px;
                                background: #409EFF;
                                width: 80px;
                                height: 80px;
                                border-radius: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: white;
                                font-size: 20px;
                                font-weight: bold;
                                cursor: pointer;

                            }
                        }
                    }
                }

            }

            .second {
                margin-top: 20px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .activity, .total, .notify {
                    flex: 0 0 540px !important;
                    background: @bgColor;
                    margin-bottom: 20px;
                }

                .pro-types {
                    span {
                        cursor: pointer;
                    }
                }

                .el-card {
                    flex: 1;

                    &:first-child {
                        flex: 1.1;

                        .status {
                            display: flex;
                            justify-content: space-between;
                            padding: 25px 0;

                            & > .item {
                                flex: 1;
                                padding: 0;
                                padding-left: 15px;

                                & > div {
                                    line-height: 2;
                                }

                                &:not(:last-child) {
                                    border-right: 1px solid #ccc;
                                }

                                &:nth-child(1) {
                                    padding-left: 0;
                                }

                                &:nth-child(2) {
                                    .leave {
                                        display: flex;

                                        .item {
                                            flex: 1;
                                            text-align: center;

                                            div {
                                                line-height: 1.5;
                                            }
                                        }
                                    }

                                }
                            }
                        }
                    }

                    &:not(:last-child) {
                        //  margin-right: 20px;
                    }

                    .counter {
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0 20px;

                        .item {
                            flex: 1 1 35%;
                            padding: 15px 20px;
                            margin: 10px;
                            text-align: center;
                            background: #FAFBFC;

                            .num {
                                font-size: 18px;
                                font-weight: bold;
                                color: #409EFF;

                                sub {
                                    font-size: 12px;
                                }
                            }
                        }

                    }

                    .list {
                        & > div {
                            margin: 20px 0;
                            display: flex;
                            justify-content: space-between;
                            cursor: pointer;

                            & > div:first-child {
                                flex: auto;
                            }

                            .index {
                                margin-right: 15px;
                                color: #409EFF;
                                font-weight: bold;
                                font-size: 16px;

                                &::after {
                                    content: '、';
                                    margin-left: 5px;
                                }
                            }
                        }
                    }
                }
            }

            .tip {
                .text {
                    margin-left: 120px;
                    position: relative;
                    padding: 0 30px;
                    display: inline-block;
                    color: #9F9FB2;
                    font-size: 18px;

                    &::before {
                        color: #DEDEDE;
                        content: '\201C';
                        font-size: 4em;
                        position: absolute;
                        left: -20px;
                        line-height: .5;
                    }

                    &::after {
                        color: #DEDEDE;
                        content: '\201D';
                        font-size: 4em;
                        position: absolute;
                        right: -20px;
                        line-height: 1.1;
                    }
                }
            }
        }

    }

    .content {
        height: 350px;
        overflow: scroll;

    }

</style>
